<template>
  <div class="auth-container">
    <h1 class="main-title">“果乐”水吧综合管理系统</h1>
    <div class="auth-box">
      <h2 class="auth-title">请注册</h2>
      <el-form :model="registerForm" class="auth-form">
        <el-form-item label="角色">
          <el-select v-model="registerForm.role_id" placeholder="请选择角色" class="auth-input">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="普通员工" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录名" prop="name">
          <el-input
              type="text"
              v-model="registerForm.name"
              placeholder="请输入登录名"
              class="auth-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pswd">
          <el-input
              type="password"
              v-model="registerForm.pswd"
              placeholder="请输入密码"
              class="auth-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="email">
          <el-input
              type="email"
              v-model="registerForm.email"
              placeholder="请输入手机号"
              class="auth-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <div class="captcha-wrapper">
            <el-input
                type="text"
                v-model="registerForm.captcha"
                placeholder="请输入验证码"
                class="auth-input captcha-input"
            ></el-input>
            <img
                :src="captchaImage"
                alt="验证码"
                class="captcha-image"
                @click="refreshCaptcha"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
              class="auth-button"
              @click="registerUser"
              :loading="loading"
          >
            注册
          </el-button>
        </el-form-item>
      </el-form>
      <div class="error-message" v-if="errorMsg">{{ errorMsg }}</div>
      <div class="register-link" @click="goToLogin">去登录</div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import http from "@/axios/http";
import qs from "qs";
import router from "@/util/router.js";
import { ElMessage } from 'element-plus';

let registerForm = reactive({ name: "", pswd: "", email: "", role_id: null, captcha: "" });
const errorMsg = ref("");
const loading = ref(false);
const captchaImage = ref("");

function refreshCaptcha() {
  http.get("/glsb/captcha", { responseType: "text" })
      .then((res) => {
        captchaImage.value = "data:image/png;base64," + res.data;
      })
      .catch((error) => {
        console.error('获取验证码失败:', error);
        errorMsg.value = "获取验证码失败，请稍后再试";
      });
}
refreshCaptcha();

function registerUser() {
  loading.value = true;
  const registerData = {
    username: registerForm.name,
    password: registerForm.pswd,
    email: registerForm.email,
    role_id: registerForm.role_id,
    loginMethod: "password",
    captcha: registerForm.captcha
  };
  http
      .post("/glsb/register", qs.stringify(registerData))
      .then((res) => {
        const result = res.data;
        loading.value = false;
        if (result.result === "success") {
          ElMessage.success('注册成功，即将跳转到登录页面');
          setTimeout(() => {
            router.push({ path: "/login" });
          }, 1500);
        } else {
          errorMsg.value = result.data || '注册失败，请稍后重试';
        }
      })
      .catch((error) => {
        console.error('注册请求出错:', error);
        loading.value = false;
        errorMsg.value = "网络错误，请稍后再试";
      });
}

function goToLogin() {
  router.push({ path: "/login" });
}
</script>

<style scoped>
.auth-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #ffffff, #e6f7ff);
}

.main-title {
  color: #409eff;
  font-size: 2rem;
  margin-bottom: 20px;
}

.auth-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 320px;
  text-align: center;
}

.auth-title {
  color: #666;
  margin-bottom: 20px;
}

.auth-form {
  width: 100%;
}

.auth-input {
  width: 100%;
  margin-bottom: 15px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  padding: 8px;
}

.captcha-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-image {
  cursor: pointer;
  width: 100px;
  height: 40px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
}

.auth-button {
  width: 100%;
  background-color: #409eff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.auth-button:hover {
  background-color: #66b1ff;
}

.error-message {
  color: red;
  margin-top: 10px;
}

.register-link {
  margin-top: 15px;
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
</style>